<template>
	<div class="park_d" ref="park_d" @scroll="scrollEvent">
		<img class="back" src="~@/assets/back.png"  alt="" @click="back">
		<swiper class="swiper" :options="swiperOptions" v-if="imgs.length>0">
			<swiper-slide class="post_r" v-for="item in imgs" :key='item.id'>
				<img v-if="item.type!=2" class="swiper_item" :src="item.img" mode="" />
				<video v-if="item.type==2" style="width: 100%;height: 100%;" :src='item.url' class="video"></video>
			</swiper-slide>
		</swiper>
		<div class="flex">
			<img class="tx" :src="data.logo" mode="widthFix" />
			<div class="park_name1">{{data.park_name}}</div>
			<div class="">
				<div class="level" v-show="data.level && data.level.indexOf('民营')==-1">{{data.level}}</div>
				<div class="" style="font-size: 12px; margin-top:4px;text-align: canter;">{{data.city_name[data.city_name.length-1]}}</div>
			</div>
		</div>
		<div class="main">
			<!-- <div class="park_name">{{data.park_name}}</div> -->
			<div class="tip" v-for="(item,index) in chainName" :key='index'>{{item}}</div>
			<div class="mj">
				<div class="mj_l">
					<div class="l_t">园区面积</div>
					<div class="num">{{data.park_area}}</div>
				</div>
				<div class="flex_t_i" @click="phone()"> 
					<img class="img" src="~@/assets/phone.png" mode="widthFix" />
					<div class="">电话</div>
				</div>
			</div>
			<div class="add">
				<div class="add_l">
					<div class="l_f">
						<img class="img3" src="~@/assets/address.png" mode="widthFix" />
						<div class="">{{data.address}}</div>
					</div>
				</div>
				<!-- <div class="flex_t_i">
					<img  class="img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/imgs/4/2020/09/dh.png" mode="widthFix" />
					<div class="">导航</div>
				</div> -->
			</div>
		</div>	
		
		<div class="title2" v-if="chainList.length>0">
			<div class="flex_t">
				<div class="active t">园区介绍</div>
			</div>
		</div>
		<div class="jiesao" :class="{open:isOpen==false}" ref="fx">
			<div class="toopen" @click="changeO" v-if="isOpen==false">点击展开全部</div>
			<div  v-html='data.content'></div>
			<div class="" style="text-align: center;margin-top: 10px; color: #007AFF;" @click="changeO1" v-if="isOpen==true">点击收起</div>
		</div>
		<div class="title2" v-if="chainList.length>0">
			<div class="flex_t">
				<div class="active t ">重点产业</div>
			</div>
		</div>
		<div class="chain_content" v-if="chainList.length>0">
			<div class="chain_list" >
				<div class="chain_item" v-for="(item1,index) in chainList" :key='index' @click="toChain1(index)">
					<img src="~@/assets/2.png" class="rt" v-if="item1.id" />
					<img v-if="item1.img" :src="item1.img" mode="" />
					<img v-else src="~@/assets/2.png" mode="" />
					<div class="">{{item1.chain_name}}</div>
					<img v-if="item1.chain_name == item.chain_name" style="width: 24px;height:24px"  src="~@/assets/xshang.png" mode="widthFix" />
				</div>
			</div>
		</div>
		
		<div class="chain_div" v-if="item.chain_name">
			<div class="" style="display: flex;">
				<div class="title_c">{{item.chain_name}}</div>
				<div class="title_c" v-if="item.id>0" style="color:#007AFF;font-size: 12px;background: #fff;" @click="toDetailChain()">查看图谱</div>
			</div>
			<div class="c_main">
				<div class="m_item" @click="showList(0)">
					<div class="title_m_i">全部企业</div>
					<div class="num">{{ qbtotal+' '}}<span class="jia"> 家</span></div>
				</div>
				<div class="m_item" @click="showList(1)">
					<div class="title_m_i">规上企业</div>
					<div class="num">{{ gstotal+' '}}<span class="jia"> 家</span></div>
				</div>
				<div class="m_item" @click="showList(2)">
					<div class="title_m_i">高新技术</div>
					<div class="num">{{ gxtotal+' '}}<span class="jia"> 家</span></div>
				</div>
				<div class="m_item" @click="showList(3)">
					<div class="title_m_i">其他企业</div>
					<div class="num">{{ qtotal+' '}}<span class="jia"> 家</span></div>
				</div>
			</div>
		</div>
		
		<div class="title2" v-if="imgs1.length>0">
			<div class="flex_t">
				<div class="active t">园区资源</div>
			</div>
		</div>
		
		<swiper class="swiper1" v-if="imgs1.length>0" :indicator-dots="false" :autoplay="true" :circular='true' previous-margin='60px' next-margin	='60px' @change="(event)=>{zyIndex=event.detail.current}">
			<swiper-slide class="swiper_item1" v-for="(item) in imgs1" :key='item.id'>
				<img class="small" :src="item.thumb" mode="" />
			</swiper-slide>
		</swiper>
 

		<div class="title2" v-if="pList.length>0">
			<div class="flex_t">
				<div class="active t">重点项目</div>
			</div>
		</div>
    <swiper :options="swiperOptionspro" v-if="pList.length>0">
        <swiper-slide v-for="(item,index) in Math.floor(pList.length/2)" :key="index">
          <div class="pro_item">
            <div class="pro_img">
              <img :src="pList[index*2].logo" alt="">
            </div>
            <div>
              <div class="big">{{pList[index*2].title}}</div>
              <div class="small">预计投资：<span class='color_s'>-</span></div>
              <div class="small">预计税收：<span class='color_s'>-</span></div>
            </div>
          </div>
          <div class="pro_item">
            <div class="pro_img">
              <img :src="pList[index*2+1].logo" alt="">
            </div>
            <div>
              <div class="big">{{pList[index*2+1].title}}</div>
              <div class="small">预计投资：<span class='color_s'>-</span></div>
              <div class="small">预计税收：<span class='color_s'>-</span></div>
            </div>
          </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
		
		<div style="width: 100%;height:20px"></div>
		
		<div class="navbar flex_sa" id='xd' ref="xd" :class="{'is_fixed' : isFixed}">
				<div
					class="item"
					v-for="(item, index) in typeListAll"
					:key="item.id"
					:class="type_index == index ? 'current' : ''"
					:id="'type_id_' + index"
					@click="typeChange(item.id, index)"
				>
					{{ item.type_name }}
				</div>
		</div>

     <van-list class="news_list" 
      v-model="loading1"
      :finished="isfinsh1"
      finished-text="没有更多了"
      v-if="type_index==0"
      @load="getMore1">
      <div  class="list_item" v-for="(item,index) in listAll[0]" :key="index" @click="toDetail(item)">
        <div class="flex_sb">
          <div class="item_logo" >
            <img :src="item.logo" alt="">
          </div>
          <div class="info_div">
            <div class="big_t">{{item.company_name}}</div>
            <div class="small_t line_text"><img src="~@/assets/address.png" alt=""> {{item.address}}</div>
            <div class="small_t ">{{item.register_time_str}} <span class="biao_div">成立</span> </div>
          </div>
          <div class="fen_div">{{item.score}}</div>
        </div>
        <div class="big_t m_b4">法人代表：{{item.legal}}</div>
        <div class="big_t">注册资金：{{item.register_money || '-'}}</div>
      </div>
    </van-list>
    <van-list class="news_list" 
      v-model="loading2"
      :finished="isfinsh2"
      finished-text="没有更多了"
      v-if="type_index==1"
      @load="getMore1">
      <div class="item_p" v-for="(item,index) in listAll[1]" :key='index' @click="toPDetail(item)">
        <div class="name1">
          <div class="name">{{item.policy_name}}</div>
          <div class="info">{{item.type_name}}｜{{item.expense_type}}</div>
          <div class="" style="text-align: right; color: #ff9933; font-size: 14px;" v-if="item.from">{{item.from}}</div>
        </div>
      </div>
    </van-list>


		<drawer ref="showRight" :width='300' @close='isshow=false' @touchmove.stop.prevent="()=>{}">
			<div class="" style="height: 40px;line-height: 40px;margin-bottom: 2px;font-size: 18px;font-weight: 800;padding-left: 20px;color: 333;box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3);">{{item.chain_name}}</div>
      <div class="list_ddd">
        <div class="box_item" v-for="(item,index) in companyList" :key='index' @click="toDetail(item)">
					<div class="name1">
						<div class="name">{{item.company_name}}</div>
						<div class="" v-if="item.park_name" style="font-size: 11px; color: #666;margin: 6px 0;">{{item.park_name}}</div>
						<div class="" v-if="item.chain_name&&item.chain_name.length>0">
							<span class="" style="font-size: 10px; color: #666;margin: 6px 0;margin-right: 6px;background-color: #ff9933;color: #fff;border-radius: 2px;padding: 1px 4px;" v-for="(item1,index1) in item.chain_name" :key="index1">{{item1}}</span>
						</div>
						<div class="" style="font-size: 10px; color: #666;margin: 6px 0;">地址： {{item.address}}</div>
					</div>
				</div>
      </div>
		</drawer>
		<back />
	</div>
</template>
<script>
import SwiperCore, {Autoplay,Pagination,Navigation} from 'swiper';
SwiperCore.use([Autoplay,Pagination,Navigation]);
	import drawer from '@/components/drawer.vue'	
	import back from '@/components/back.vue'	
	import { encode } from '@/utils/utils.js'
	import { jssdk, getparkdetail,GetCompanyTotal,GetParkHonor,policy ,park,parklist,companylist,GetChainDistTwoByParkId, GetChainDistByParkId,localprojects } from '@/api/api.js'
	export default {
		data() {
			return {
        isFixed:false,
        offsetTop:0,
        swiperOptions: {
          slidesPerView: 1,//显示个数
          reversDirection:true,
          observer:true,//修改swiper自己或子元素时，自动初始化swiper 
  　　    observeParents:true,//修改swiper的父元素时，自动初始化swiper 
          freeMode: true,
          speed:500,
          loop:true
        },
        swiperOptionspro: {
          slidesPerView: 2.4,//显示个数
          reversDirection:true,
          observer:true,//修改swiper自己或子元素时，自动初始化swiper 
  　　    observeParents:true,//修改swiper的父元素时，自动初始化swiper 
          freeMode: true,
          speed:500,
          loop:true
        },
				data:{city_name:[]},
				isSc:false,
				isSSS:true,
				companyList:[],
				list:[{}],
				id:'',
				isNewRenderDone:true,
				plList:[],
				chainList:[],
				chainName:[],
				pList:[],
				childrenList:[],
				isOpen:false,
				imgs:[],
				imgs1:[],
				isAuto:true,
				zyIndex:0,
				item:{chain_name:'',id:''},
				isfinsh1:false,
				isfinsh2:false,
				isfinsh3:false,
				listAll:[[],[],[],[],[]],
        loading1:false,
        loading2:false,
        loading3:false,
				pageL:[1,1,1,1,1],
				typeListAll:[
					{type_name:'龙头企业',id:1},
					{type_name:'政策',id:2},
				],
				type_index:0,
				scroll_type_id:'type_id_0',
				index1:0,
				height:0,
				gstotal:0,
				gxtotal:0,
				qbtotal:0,
				qtotal:0,
				total:0,
				user_id:'',
        top:0,
        top1:0,
			}
		}, 
		components: {
			drawer,
			back
		}, 
    activated(){
      this.$refs.park_d.scrollTop =  this.top 
    },
    mounted() {
      setTimeout(()=>{
        this.top1 = this.$refs.xd.offsetTop
      },1500)
    },
		activated(){
      this.$refs.park_d.scrollTop =  this.top 
			if(this.id != this.$route.query.id){
				this.id= this.$route.query.id
				this.getdetail(this.id)
				this.getC()
				this.getP(this.id)
				this.getClist()
				this.getImg(this.id)
				this.getZy(this.id)
				GetChainDistTwoByParkId({park_id:this.id}).then(res=>{
					res.data.unshift({chain_name:'全部',id:'',chain_id:''})
					this.chainList=res.data
					if(res.data.length>0)
					this.item = res.data[0]
					this.getGStotal()
					this.getGXtotal()
					this.getQBtotal()
					this.getQTtotal()
				})
				GetChainDistByParkId({park_id:this.id}).then(res=>{
					this.chainName=res.data
				})
			}
    },
		created(){
      this.id= this.$route.query.id
			this.getdetail(this.id)
			this.getC()
			this.getP(this.id)
			this.getClist()
			this.getImg(this.id)
			this.getZy(this.id)
			GetChainDistTwoByParkId({park_id:this.id}).then(res=>{
				res.data.unshift({chain_name:'全部',id:'',chain_id:''})
				this.chainList=res.data
				if(res.data.length>0)
				this.item = res.data[0]
				this.getGStotal()
				this.getGXtotal()
				this.getQBtotal()
				this.getQTtotal()
			})
			GetChainDistByParkId({park_id:this.id}).then(res=>{
				this.chainName=res.data
			})
		},
		methods: {
			back(){
				this.$router.go(-1)
			},
      scrollEvent(){
        if(this.top1==0){
          return
        }
        this.isFixed = (this.$refs.park_d.scrollTop >= this.top1)?true:false
      },
      changeO(){
				this.isOpen=true
			},
			changeO1(){
				this.isOpen=false
			},
			imgError(e,index){
				this.companyList[index].logo='https://wqq103910.oss-cn-hangzhou.aliyuncs.com/imgs/8/companyLogo.png'
			},
			imgError1(e,index){
				this.listAll[0][index].logo='https://wqq103910.oss-cn-hangzhou.aliyuncs.com/imgs/8/companyLogo.png'
			},
			showList(type){
				if((type==1&&this.gstotal==0)||(type==2&&this.gxtotal==0)||(type==1&&this.qbtotal==0)){
					this.$Message.err('暂无数据')
					return
				}
				this.isshow=true
				this.$refs.showRight.show()
				let data = {
					label_id:type==0?'':type==1?50150:type==3?179790:1,
					yun_chain_id:this.item.chain_id,
					park_id:this.id,
					limit:1000
				}
				this.companyList = []
				companylist(data).then(res=>{
					res.data.data.forEach(item=>{
						item.chain_name = item.chain_name.length>0?item.chain_name.split(',').slice(0,3):''
					})
					this.companyList = res.data.data
				})
			},
			getQTtotal(){
				GetCompanyTotal({park_id:this.id,label_id:179790,yun_chain_id:this.item.chain_id}).then(res=>{
					this.qtotal = res.data
				})
			},
			getGStotal(){
				GetCompanyTotal({park_id:this.id,label_id:50150,yun_chain_id:this.item.chain_id}).then(res=>{
					this.gstotal = res.data
				})
			},
			getQBtotal(){
				GetCompanyTotal({park_id:this.id,yun_chain_id:this.item.chain_id}).then(res=>{
					this.qbtotal = res.data
				})
			},
			getGXtotal(){
				GetCompanyTotal({park_id:this.id,label_id:1,yun_chain_id:this.item.chain_id}).then(res=>{
					this.gxtotal = res.data
				})
			},
			toPDetail(item){
        this.top = this.$refs.park_d.scrollTop 
				this.$router.push({name:'pDetail',query:{id:item.id}})
			},
			getMore1(){
				// 模拟分页请求 (加载更多)
				this.pageL[this.type_index] +=1
				if(this.type_index==0){
          if(this.isfinsh1){
            return
          }
					this.getC()
				}
				if(this.type_index==1){
          if(this.isfinsh2){
            return
          }
					this.getAllZc()
				}
			},
			changeS(val){
				if(val.detail.current == this.type_index){
					return
				}
				let index = val.detail.current
				this.typeChange(0,index)
			},
			/*切换导航*/
			typeChange(type_id, index) {
				if(index == this.type_index){
					return
				}
				this.type_index = index
				var nextIndex = index - 1
				nextIndex = nextIndex <= 0 ? 0 : nextIndex
				this.scroll_type_id = `type_id_${nextIndex}` //动画滚动,滚动至中心位置
				this.$nextTick(()=>{
					if(index==0 && this.listAll[0].length==0){
						this.getC()
					}
					if(index==1 && this.listAll[1].length==0){
						this.getAllZc()
					}
				})
			},
			getAllZc(){
				let page = this.pageL[1]
        this.loading2=true
				policy.getList({park_id:this.id,page}).then(res=>{
					if(page==1){
						this.listAll[1] = res.data.data
						this.listAll.push({})
						this.listAll.pop()
					}else{
						this.listAll[1] = this.listAll[1].concat(res.data.data)
						this.listAll.push({})
						this.listAll.pop()
					}
					if(page >= res.data.last_page){
						this.isfinsh2 = true
					}
          this.loading2=false
				})
			},
			getImg(id){
				park.GetParkImg({id:id}).then(res=>{
					this.imgs = res.data
				})
			},
			getZy(id){
				GetParkHonor({id:id}).then(res=>{
					this.imgs1 = res.data
				})
			},
			getClist(){
			},
			toP(id){
        this.top = this.$refs.park_d.scrollTop 

        this.$router.push({name:'proDetail',query:{id}})
			},
      toparkDetail(item){
        this.top = this.$refs.park_d.scrollTop 
        this.$router.push({name:'parkDetail1',query:{id:item.id}})
			},
			toDetail(item){
        this.top = this.$refs.park_d.scrollTop 
        this.$router.push({name:'companyDetail',query:{identification:item.identification}})
			},
			getC(){
				let page = this.pageL[0]
        this.loading1=true
				companylist({park_id:this.id, label_id:50150,page}).then(res=>{
					res.data.data.forEach(item=>{
						item.chain_name = item.chain_name.length>0?item.chain_name.split(',').slice(0,3):''
					})
					if(page==1){
						this.listAll[0] = res.data.data
						this.listAll.push({})
						this.listAll.pop()
					}else{
						this.listAll[0].push(...res.data.data)
						this.listAll.push({})
						this.listAll.pop()
					}
					if(this.listAll[0].length == res.data.total){
						this.isfinsh1= true
					}else{
						this.isfinsh1= false
          }
          this.loading1=false
				})
			},
			getP(id){
				localprojects.getList({park_id:id}).then(res=>{
					this.pList= res.data.data
					console.log(this.pList)
				})
			},
			toC(identification){
        this.top = this.$refs.park_d.scrollTop 
        this.top1 = this.$refs.park_l.scrollTop 
        this.$router.push({name:'companyDetail',query:{identification}})
			},
			getdetail(id){
				getparkdetail({id}).then(res=>{
					this.data = res.data
					jssdk({url: encode(window.location.href)}).then(res=>{
						this.wxInit(res.data)
					})
				})
			},
			phone(){
				window.location.href = this.data.phone?`tel://${this.data.phone}`:'400-962-5108' 
			},
			toChain1(index){
				this.item = this.chainList[index]
				this.getGStotal()
				this.getGXtotal()
				this.getQBtotal()
				this.getQTtotal()
			},
			toDetailChain(){
				window.open('https://out.parkic.com/#/chain?city_id=1&chain_id='+this.item.id)
			},
				wxInit(data){
				let that = this
				wx.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: data.appId, // 必填，公众号的唯一标识
					timestamp: data.timestamp, // 必填，生成签名的时间戳
					nonceStr: data.nonceStr, // 必填，生成签名的随机串
					signature: data.signature,// 必填，签名
					jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline','updateAppMessageShareData','updateTimelineShareData'] // 必填，需要使用的JS接口列表
				})
				wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
					wx.updateAppMessageShareData({ 
						title: `${that.data.park_name}`, // 分享标题
						desc: that.data.address,
						link: window.location.href,
						imgUrl: that.data.logo,
						success: function () {
							// 设置成功
						}
					})
					//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
					wx.updateTimelineShareData({ 
						title: `${that.data.park_name}`, // 分享标题
						link: window.location.href,
						imgUrl: that.data.logo,
						success: function () {
							// 设置成功
						}
					})
				}); 
			},
		},
		onReachBottom() {
			if(!this.isNewRenderDone) return;   
			this.isNewRenderDone = false
		},
	}
</script>

<style lang="scss" scoped>
.post_r{
	position: relative;
}
.see1{
	position: absolute;
	right: 0;
	bottom: 0;
	min-width: 80px;
	background-color: rgba($color: #000000, $alpha: .5);
	color: #fff;
	display: flex;
	align-items: center;
	font-size: 14px;
	padding: 2px 14px;
}
.chain_div{
	margin: 10px;
	width: calc(100% - 20px);
	.title_c{
		display: inline-block;
		padding: 0 10px;
		height: 28px;
		line-height: 28px;
		color: #fff;
		background: linear-gradient(45deg, #FFC900 0%, #ff9933 100%);
		border-radius: 2px;
	}
	.c_main{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		background-color: #fafafa;
		padding: 12px 10px;
		.m_item{
			width: 25%;
			height: 70px;
			text-align: center;
			.title_m_i{
				margin: 8px 0 10px 0px;
				position: relative;
				// &::before{
				// 	content: ' ';
				// 	position: absolute;
				// 	top: 2px;
				// 	left: -10px;
				// 	height: 16px;
				// 	width: 4px;
				// 	background-color: #FF5C00;
				// }
			}
			.num{
				color: #FF5C00;
				font-size: 22px;
				// margin-left: 40px;
				margin-bottom: 10px;
				font-weight: 800;
			}
			.jia{
				color: #666;
				font-weight: 400;
				font-size: 14px;
			}
		}
	}
}
.swiper{
	width: 100%;
	height: 210px;
	position: relative;
	.swiper_item{
		width: 100%;
		height:100%;
		img{
			width: 100%;
			height:100%;
		}
	}
}
.swiper1{
	width: 100%;
	height: 180px;
	margin-bottom: 20px;
	.swiper_item1{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.small{
		width:calc(100% - 40px);
		height: 130px;
		transition: all 0.5s;
		background-color: rgba($color: #000000, $alpha: .3);
		box-shadow: 0px 0px 12px 0 rgba($color: #000000, $alpha: .3);
	}
	.big{
		width: calc(100% - 8px);
		height: 170px;
		// margin: auto;
		box-shadow: 0px 0px 12px 0 rgba($color: #000000, $alpha: .3);
	}
}
.open{
	height: 100px !important;
	min-height: 100px !important;
	overflow: hidden !important;
	position: relative !important;
	margin-bottom: 40px;
}
.toopen{
	position: absolute;
	bottom: 0;
	height: 100px;
	line-height: 180px;
	text-align: center;
	width: calc(100% - 28px);
	z-index: 10;
	background: linear-gradient(0deg, rgba(255,255,255,1) 0,rgba(255,255,255,0.2) 100%);
	text-decoration: underline;
	color: #007AFF;
}
.jiesao{
	padding: 0 14px;
	min-height: 100px;
	overflow: hidden;
	transition: all 0.5s;
	position: relative;
	
}
	.t_three{
		width: 20px;
		height: 135px;
		background: rgba($color: #FF5100, $alpha: 0.1) ;
		// text-shadow: 0px 0px 3px #FF5100;
		color: #FF5100;
	}
	.chain_content{
		width: calc(100% - 20px);
		margin: 20px 10px 0;
		.swiper{
			height: 120px;
			position: relative;
			.swiper-slide{
				height: 120px;
				position: relative;
			}
		}
		.chain_list{
			display: flex;
			overflow-x: scroll;
			overflow-y: hidden;
			height: 110px;
			padding-top: 10px;
			// justify-content: space-between;
			// flex-wrap: wrap;
      &::-webkit-scrollbar {
        width: 0 !important;
      }
      &::-webkit-scrollbar {
        width: 0 !important;height: 0;
      }
		}
		.chain_item{
			min-width: 80px;
			max-width: 80px;
			text-align: center;
			color:#666666;
			font-size: 15px;
			margin-bottom: 18px;
			position: relative;
			// margin-right: 10px;
			.rt{
				width: 20px;
				height: 20px;
				position: absolute;
				background-color: #fff;
				top: -10px;
				right: 10px;
				border-radius: 10px;
			}
			img{
				width: 46px;
				height: 46px;
				margin-bottom: 5px;
			}
			div{
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
.park_d{
	width: 100%;
	position: relative;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.flex_t_i{
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #666;
	.img{
		width: 18px;
		height: 18px;
		margin-right: 6px;
	}
}
.flex{
	display: flex;
	margin: 10px 0 0;
	margin-left: 16px;
	align-items:center;
	// height: 24px;
	.tx{
		position: relative;
		width: 48px;
		// top: -24px;
		margin-right: 6px;
	}
	.level{
		padding:2px 4px;
		// height: 16px;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 16px;
		text-align: center;
		background: #FF2D44;
		border-radius: 3px;
	}
}
.main{
	width: calc(100% - 32px);
	margin: 0 16px 28px;
  padding: 0 0 16px 0;
	border-bottom: 1px solid #e7e7e7;
	.park_name{
		font-size: 18px;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 24px;
		margin-top: 10px;
	}
	.tip{
		margin-top: 10px;
		height: 20px;
		line-height: 18px;
		padding: 0 3px;
		border-radius: 2px;
		border: 1px solid #FC5517;
		margin-left: 4px;
		display: inline-block;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FC5517;
	}
	.mj{
		display: flex;
		justify-content: space-between;
		margin: 15px 0;
		.mj_l{
			display: flex;
			border-radius: 14px;
			width: 195px;
			height: 28px;
			background: #F3F3F6;
			justify-content: space-between;
			.l_t{
				width: 76px;
				height: 28px;
				line-height: 28px;
				color: #fff;
				font-size: 14px;
				background: linear-gradient(180deg, #FE8E33 0%, #FC5517 100%);
				border-radius: 14px 0px 14px 14px;	
				text-align: center;
			}
			.num{
				width: 120px;
				font-size: 14px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #666666;
				text-align: center;
				line-height: 28px;
			}
		}
		.mj_r{
			height: 26px;
			line-height: 26px;
			text-align: center;
			background: #FEEEE7;
			border-radius: 14px;
			font-size: 14px;
			font-weight: 400;
			color: #FC5517;
			padding: 0 10px;
		}
	}
	.add{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.img3{
			min-width: 18px;
			max-width: 18px;
			margin-right: 10px;
		}
		.add_l{
			font-size: 14px;
				font-weight: 400;
				color: #666666;
				width: calc(100% - 60px);
				.l_f{
					display: flex;
					align-items: center;
				}
			}
		.add_r{
			display: flex;
			text-align: center;
			justify-content: space-between;
			width: 84px;
			font-size: 12px;
			font-weight: 400;
			color: #FC5517;
		}
	}
}
.left_title{
	border-radius: 4px;
	font-size: 16px;
	// letter-spacing: 2px;
	font-weight: 800;
	line-height: 22px;
	font-family: YouSheBiaoTiHei;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 0 20px 0 20px;
	// font-style:oblique;
	margin: 10px 7px 0px 15px;
}
.t_two{
	width: 20px;
	height: 88px;
	background: rgba($color: #5C8FF6, $alpha: 0.1) ;
	// text-shadow: 0px 0px 3px #FF3950;
	color: #5C8FF6;
}
.t_one{
	width: 20px;
	height: 135px;
	background:rgba($color: #00B896, $alpha: 0.1);
	// text-shadow: 0px 0px 3px #008926;
	color: rgba($color: #00B896, $alpha: 0.9);
}
.rycs{
	display: flex;
	.right_c{
		width: calc(100% - 90px);
		height: 88px;
		margin-top: 10px;
	}
	.img-container,.swiper-slide{
		height: 88px;
	}
	.img-container1,.swiper-item1{
		height: 135px;
	}
	.swiper-slide{
		width: 128px !important;
		height: 88px;
		position: relative;
		.name{
			position: absolute;
			left: 10px;
			width: calc(100% - 20px);
			top: 20%;
		}
		.name1{
			position: absolute;
			bottom: 0px;
			left: 0px;
			// border-radius: 8px;
			height: 100%;
			width: 121px;
			font-size: 16px;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba($color: #000000, $alpha: 0.3);
			// font-weight: 800;
			color: #fff;
			font-style: '微软雅黑';
			// border-radius: 8px;
		}
		img{
			width: 121px;
			height: 88px;
			border-radius: 4px;
		}
	}
	.swiper-item1{
		width: 157px !important;
		padding-left: 5px;
		img{
			width: 150px;
			height: 110px;
			border-radius: 4px;
		}
	}
}
.title{
	height: 18px;
	font-size: 18px;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 700;
	color: #333333;
	line-height: 18px;
	margin: 40px 20px 20px 20px;
}
.bottom{
	position: fixed;
	justify-content: space-between;
	align-items: center;
	bottom: 0;
	// width: calc(100% - 20px);
	width:100%;
	// padding: 0 10px;
	height: 54px;
	background: #FFFFFF;
	display: flex;
	box-shadow: 0px -2px 2px #e7e7e7;
	z-index: 100;
	.btn{
		font-size: 18px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		height: 54px;
		line-height: 54px;
		background: linear-gradient(90deg, #FE8E33 0%, #FC5517 100%);
		// border-radius: 23px;
		width: 180px;
	}
	.sc{
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		text-align: center;	
		// width: ;
		position: relative;
		img{
			width: 24px;
			height: 24px;
		}
		.num{
			position: absolute;
			font-size: 12px;
			background-color: red;
			height: 14px;
			line-height: 14px;
			border-radius: 7px;
			padding: 0 4px;
			color: #fff;
			right: -5px;
			top: -5px;
		}
	}
}
.pl_item{
	display: flex;
	margin: 10px 16px;
	width: calc(100% - 32px);
	.tx{
		width: 24px;
		height: 24px;
		margin-right: 10px;
	}
	.r{
		width: calc(100% - 34px);
		padding-bottom:10px;
		border-bottom: 1px solid #E9EBEE;
		.top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
			.name{
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #507DAF;
			}
			.time{
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
		.content{
			padding-top:10px;
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}
}
.title_pj{
	font-size: 18px;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 25px;
	margin: 16px;
	width: calc(100% - 32px);
	display: flex;
	justify-content: space-between;
	.right{
		display: flex;
		align-items: center;
			img{
				width: 15px;
				margin-right: 5px;
			}
			font-size: 14px;
			font-weight: 400;
			color: #FF5100;
	}
}
.city_name{
	position: absolute;
	top:8px;
	left: 0px;
	padding: 5px;
	font-size: 14px;
	background: #FA6400;
	border-radius: 4px;
	color: #fff;
}
.park_name1{
	// height: 24px;
	font-size: 20px;
	font-weight: 800;
	color: #000000;
	// line-height: 22px;
	// white-space: nowrap;
	// text-overflow: ellipsis;
	// overflow: hidden;
	margin: 0 10px;
	width: calc(100% - 130px);
	// margin-top: 5px;
}
.see{
	display: flex;
	color: #fff;
	font-size: 12px;
	position: absolute;
	left: 8px;
	top: 90px;
	align-items: center;
}
.see_img{
	width: 14px !important;
	margin-right: 4px;
}
.m_left{
	margin-left: 10px;
}
.add{
	display: flex;
	justify-content: space-between;
	color: #999999;
	font-size: 12px;
	// padding-right: 5px;
	margin-top: 5px;
	align-items: center;
}
.add_item{
	display: flex;
	align-items: center;
}
.item_com{
	background: #FFFFFF;
	box-shadow: 0px 2px 2px 2px rgba(191, 191, 191, 1);
	border-radius: 6px;
	padding: 14px 12px;
	margin: 10px 5px;
	width: calc(100% - 34px);
	display: flex;
	position: relative;
	.score{
		position: absolute;
		right: 16px;
		font-size: 22px;
		color: #f93;
	}
	img{
		width: 36px;
		height: 36px;
		margin-right: 8px;
	}
	.name1{
		width: 70%;
	}
	.name2{
		width: 100%;
	}
	.name{
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 21px;
	}
	.info{
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 17px;
	}
}
.title2{
	margin: 30px 10px 20px 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.hb{
		width: 70px;
		height: 18px;
		font-size: 14px;
		font-weight: 400;
		color: #FA6400;
		line-height: 18px;
		margin-left: 8px;
	}
	.more{
		font-size: 13px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 13px;
	}
}
.flex_t{
	display: flex;
	align-items: center;
	.t{
			width: 90px;
			text-align: center;
			color: #666;
			font-size: 16px;
			position: relative;
			.t_a{
				position: absolute;
				bottom: 0px;
				width: 50px;
				left: 20px;
				z-index: -1;
				transition:all 0.2s;
			}
			.left1{
				transform: translateX(90px);
			}
			.left2{
				transform: translateX(180px);
			}
	}
	.t1{
		width: 120px;
		.t_a{
			left: 35px;
		}
	}
	.shu{
		width: 1px;
		height: 16px;
		background-color: #ccc;
	}
	.active{
		font-size: 18px;
		font-weight: 700;
		color: #333333;
	}
}
.box_item{
	width: calc(100% - 44px);
	margin: 10px 10px;
	background: #FFFFFF;
	box-shadow: 0px 2px 2px 2px rgba(191, 191, 191, 1);
	border-radius: 6px;
	display: flex;
	padding: 12px;
	position: relative;
	img{
		width: 36px;
		height: 36px;
		margin-right: 8px;
	}
	.score{
		position: absolute;
		right: 16px;
		font-size: 22px;
		color: #f93;
	}
	.name1{
		width: 70%;
	}
	.name{
		font-size: 15px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 700;
		color: #111;
		line-height: 21px;
	}
	.info{
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 17px;
	}
}
	.nomore{
		height: 60px;
		line-height: 60px;
		text-align: center;
		color: #888;
	}
	.loading{
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #888;
		img{
			width: 32px;
			height: 32px;
			margin-right: 10px;
			animation: zhuan 1.2s linear infinite;
		}
	}
	@keyframes zhuan {
		0% {
			transform: rotate(0deg);
		}
		50% {
			transform: rotate(180deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
	.navbar {
			/*分类*/
			width: 100%;
			height: 36px;
      line-height: 36px;
			// position: sticky;
			// top: 0;
			z-index: 10;
			background-color: #fff;
			box-shadow: 0 2px 3px 0 rgba($color: #000000, $alpha: .3);
			padding-bottom: 10px;
			van-list {
				width: calc(100% - 30px);
				margin: 0 15px;
				white-space: nowrap;
				position: relative;
				.item {
					position: relative;
					display: inline-block;
					margin: 4px 12px 0;
					text-align: left;
					padding-top: 4px;
					&:first-child {
						margin-left: 5px;
					}
					&:after {
						content: '';
						width: 0;
						height: 0;
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						transition: 0.3s;
					}
					.span {
						position: relative;
						width: auto;
						height: auto;
						line-height: auto;
						display: inline-block;
						span {
							font-size: 15px;
							font-weight: bold;
							color: #333;
						}
						img {
							position: absolute;
							top: 8px;
							right: -7px;
							width: 25px;
							height: 25px;
							display: none;
						}
					}
				}
			}
		}
    	.current {
					font-size: 16px;
          font-weight: 800;
          color: #f93;
				}
.item_p{
	// width: calc(100% - 68px);
	margin: 10px 22px;
	background: #FFFFFF;
		box-shadow: 0px 2px 2px 2px rgba(191, 191, 191, 1);
	border-radius: 6px;
	display: flex;
	padding: 12px;
	position: relative;
	img{
		width: 36px;
		height: 36px;
		margin-right: 8px;
	}
	.score{
		position: absolute;
		right: 10px;
		font-size: 10px;
		color: #333;
	}
	.name1{
		width: 100%;
	}
	.name{
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333;
		line-height: 21px;
	}
	.info{
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 17px;
	}
}
.score1{
	position: absolute;
	right: 10px;
	font-size: 12px;
	color: #333;
}
.userinfo{
	position:fixed;
	bottom:0;
	z-index:1000;
	display:flex;
	align-items:center;
	background:#ff9933;
	color:#fff;
	padding:15px 20px;
	width:calc(100% - 40px);
	box-shadow: 0 -2px 2px 0 rgba(0,0,0,0.2);
	.img{
		width:42px;
		height:42px;
		border-radius:21px;
		margin-right:20px;
	}
	.btn{
		position:absolute;
		right:30px;
		border-radius:4px;
		padding:4px 8px;
		background:#fff;
		color:#ff9933;
	}
	.img1{
		position:absolute;
		right:0;
		top:-5px;
		height:18px;
		width:18px;
	}
}
.phone_div{
	position: fixed;
	z-index: 100;
	left: 10px;
	width: calc(100% - 20px);
	height: 80px;
	bottom: 80px;
	border-radius: 4px;
	background-color: #EDEDEF;
	display: flex;
	align-items: center;
	.phone_img{
		width: 60px;
		height: 60px;
		border-radius: 30px;
		margin-left: 20px;
		margin-right: 14px;
	}
	.phone_t{
		.phone_t1{
			font-size: 17px;
			font-weight: 800;
			color: #1d1d1b;
			margin-bottom: 4px;
		}
		.phone_t2{
			font-size: 13px;
			color: #333;
		}
	}
	.phone_btn{
		background-color: #05C160;
		color: #fff;
		width: 100px;
		line-height: 36px;
		height: 36px;
		font-size: 16px;
		border-radius: 3px;
		position: absolute;
		right: 20px;
	}
	.img1{
		position:absolute;
		right:-6px;
		top:-6px;
		height:18px;
		width:18px;
	}
}


.list_item{
  width: calc(100% - 20px);
  margin: 10px 10px;
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  .item_logo{
    max-width: 60px;
    min-width: 60px;
    img{
      width: 100%;
      height: 56px;
      border-radius: 8px;
    }
  }
  .big_t{
    font-size: 16px;
    color: #111;
  }
  .small_t{
    font-size: 14px;
    margin:4px 0;
    img{
      width: 20px;
      position: relative;
      top: 4px;
    }
    .biao_div{
      background: #ff9933;
      color: #fff;
      font-size: 12px;
      height: 14px;
      border-radius: 2px;
      padding: 1.5px 4px;
      margin-left: 4px;
    }
  }
  .info_div{
    width: calc(100% - 130px);
  }
  .fen_div{
    width: 50px;
    color: rgb(209, 0, 0);
    font-size: 14px;
  }
}
.xx_info{
  font-size: 13px;
  margin-top: 10px;
}
  .news_list{
    // height: calc(100% - 40px);
    // overflow-y: auto;
    background: #f3f3f3;
    padding-top:1px;
  }
  .none_img{
    width: 100%;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
  }
  .is_fixed{
     width: 100%;
     position: fixed;
     top: 0;
     z-index: 999;
}
.back{
	position:absolute;
	left: 4px;
	top: 7px;
	height: 32px !important;
	width: 32px !important;
	z-index: 1000;
}
</style>

